<template>
  <!-- 字段条件新增表单 -->
  <el-form :inline="true" :model="formInputData.formInline" class="demo-form-inline" v-show="dialogFormVisible">
    <el-form-item label="">
      <el-select v-model="formInputData.formInline.left" placeholder="" size="mini" style="width:150px" @change="changeEvent($event, 1)">
        <el-option
          v-for="(item, index) in firstParams"
          :key="index"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-select v-model="formInputData.formInline.name" placeholder="" size="mini" style="width:150px" @change="changeEvent($event, 2)">
        <el-option
          v-for="(item, index) in secParams"
          :key="index"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <!-- <el-input v-model="formInline.right" placeholder="" size="mini"></el-input> -->
      <diff-input ref="diffInput" :inputType="inputType" :inputType2="inputType2" @changeValue="changeValue"/>
    </el-form-item>
    <el-form-item>
      <el-button size="mini" type="warning" @click="saveParamsChange">确定</el-button>
    </el-form-item>
    <el-form-item>
      <el-button size="mini" @click="cancelParams">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import DiffInput from '@/components/log-change-input'
export default {
  props: {
    dialogFormVisible: {
      default: false
    },
    editData: {
      default: () => {}
    },
    secParams: {
      type: Array,
      default: () => []
    }
  },
  components: {
    DiffInput
  },
  data() {
    return {
      formInputData: {
        label: '',
        formInline: {
          left: '1',
          name: 'oper_eq',
          right: ''
        }
      },
      firstParams: [
        { name: '事件ID', value: '1', type: 'text' },
        { name: '事件接收时间', value: '2', type: 'time' },
        { name: '产生时间', value: '3', type: 'time' },
        { name: '事件名称', value: '4', type: 'text' }
      ],
      // secParams: [
      //   { name: '=', value: '11', type: 'text' },
      //   { name: '!=', value: '22', type: 'text' },
      //   { name: '>', value: '33', type: 'text' },
      //   { name: '<', value: '44', type: 'text' },
      //   { name: '在两者之间', value: '55', type: 'between' },
      //   { name: '属于', value: '66', type: 'textarea' },
      //   { name: '是否为空', value: '77', type: 'radio' },
      //   { name: '引用自定义资源', value: '88', type: 'select' }
      // ],
      inputType: 'text',
      inputType2: 'text',
      isEdit: false
    }
  },
  methods: {
    // 初始化数据
    init(data) {
      if (data) {
        this.isEdit = true
        this.$nextTick(() => {
          this.formInputData.formInline = { ...data.operbase }
          this.$refs.diffInput.init(this.formInputData.formInline.right)
        })
      } else {
        this.formInputData.formInline.left = '1'
        this.formInputData.formInline.name = 'oper_eq'
        this.formInputData.formInline.right = ''
      }
    },
    // 下拉框数据切换
    changeEvent(e, type) {
      this.formInputData.formInline.right = ''
      let currentData = {}
      // 第一个下拉框
      if (type === 1) {
        currentData = this.firstParams.find((item) => {
          return item.value === e
        })
        this.inputType = currentData.type
      } else { // 第二个下拉框
        currentData = this.secParams.find((item) => {
          return item.value === e
        })
        this.inputType2 = currentData.type
      }
      this.$refs.diffInput.init()
    },
    changeValue(val) {
      this.formInputData.formInline.right = val
    },
    // 保存数据
    saveParamsChange() {
      const leftLabel = this.firstParams.filter((item, index) => {
        return item.value === this.formInputData.formInline.left
      })
      const centerLabel = this.secParams.filter((item, index) => {
        return item.value === this.formInputData.formInline.name
      })
      this.formInputData.label = leftLabel[0].name + ' ' + centerLabel[0].name + ' ' + this.formInputData.formInline.right
      this.$emit('saveParamsChange', this.formInputData)
    },
    // 取消添加
    cancelParams() {
      this.$emit('cancelParams', false, this.isEdit)
      this.init()
    }
  }
}
</script>
